<template>
  <div class="park-detail-bottom-left-wrapper">
    <LayoutTabsAnchor :data-list="tabsList" :current-tab.sync="currentTab">
      <!-- <template v-for="item in tabsList" #[item.value]>
        <div :id="item.value" :ref="item.value" :key="item.value" class="tab-item-content">
          <component :is="item.value" :label="item.label" />
        </div>
      </template> -->

      <BaseInfo
        id="BaseInfo"
        ref="BaseInfo"
        label="基本信息"
        desc-label="仓库介绍"
        :data-obj="baseInfoData"
        class="mb-[20px]"
      />

      <BaseInfo
        id="BaseInfo"
        ref="BaseInfo"
        label="设施设备"
        :data-obj="baseInfoData2"
        class="mb-[20px]"
      />

      <IndustryInfo label="招商需求" :data-list="industryData" class="mb-[20px]" />

      <PeripheralSupport
        id="PeripheralSupport"
        ref="PeripheralSupport"
        label="地理位置"
        :lng-lat="lngLat"
      />

      <!-- <template #BaseInfo> </template>

      <template #IndustryInfo> </template>

      <template #IndustrySupport> </template>

      <template #ProductionCost> </template>

      <template #PeripheralSupport> </template> -->
    </LayoutTabsAnchor>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import LayoutTabsAnchor from '@/components/portal/LayoutTabsAnchor.vue'
import BaseInfo from '@/components/portal/resource/workshop/BaseInfo.vue'
import IndustryInfo from '@/components/portal/resource/workshop/IndustryInfo.vue'
import PeripheralSupport from '@/components/portal/PeripheralSupport.vue'
export default Vue.extend({
  components: {
    LayoutTabsAnchor,
    BaseInfo,
    PeripheralSupport,
    IndustryInfo,
  },
  props: {
    dataObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      currentTab: null,
      tabsList: [
        {
          label: '资源信息',
          value: 'All',
        },
      ],
      tabsList2: [
        {
          label: '基本信息',
          value: 'BaseInfo',
        },
        {
          label: '产业情况',
          value: 'IndustryInfo',
        },
        {
          label: '产业配套',
          value: 'IndustrySupport',
        },
        {
          label: '生产成本',
          value: 'ProductionCost',
        },
        {
          label: '周边配套',
          value: 'PeripheralSupport',
        },
      ],
    }
  },
  computed: {
    industryData() {
      const arr = [
        {
          label: '意向产业',
          key: 'intendedIndustryLabel',
          value: '--',
        },
      ]

      arr.forEach((d) => {
        const val = this.dataObj[d.key]
        if (val) {
          d.value = val.join('，')
        }
      })

      return arr
    },
    industrySupportData() {
      const { infrastructure } = this.dataObj
      return {
        infrastructure,
      }
    },
    industryInfoData() {
      const { mainIndustryLabel, intendedIndustryLabel, prohibitIndustry, industryDesc } =
        this.dataObj
      return [
        {
          label: '主导产业',
          value: mainIndustryLabel && mainIndustryLabel.join(','),
        },
        {
          label: '意向产业',
          value: intendedIndustryLabel && intendedIndustryLabel.join(','),
        },
        // {
        //   label: '禁入产业',
        //   value: prohibitIndustry,
        // },
        {
          label: '产业介绍',
          value: industryDesc,
        },
      ]
    },
    baseInfoData() {
      const keysList = [
        {
          label: '仓库面积',
          key: 'area',
          value: '--',
          unit: '㎡',
        },
        {
          label: '租售类型',
          key: 'rentOrSaleLabel',
          value: '--',
          unit: '',
        },
      ]
      const rentOrSale = this.dataObj.rentOrSale
      if (rentOrSale === '1') {
        keysList.push({
          label: '仓库租金',
          key: 'rent',
          value: '--',
          unit: '元/平米*月',
        })
      } else if (rentOrSale === '2') {
        keysList.push({
          label: '仓库售价',
          key: 'price',
          value: '--',
          unit: '元/平米',
        })
      }

      keysList.push(
        ...[
          {
            label: '仓库产权',
            key: 'propertyRightLabel',
            value: '--',
            unit: '',
          },
          {
            label: '仓库类型',
            key: 'typeLabel',
            value: '--',
            unit: '',
          },
          {
            label: '占地面积',
            key: 'areaCovered',
            value: '--',
            unit: '平米',
          },
          {
            label: '院落面积',
            key: 'courtyardgArea',
            value: '--',
            unit: '平米',
          },
          {
            label: '仓库结构',
            key: 'structureLabel',
            value: '--',
            unit: '',
          },
          {
            label: '地面承重',
            key: 'bearing',
            value: '--',
            unit: '吨/平米',
          },
          {
            label: '仓库层数',
            key: 'floor',
            value: '--',
            unit: '层',
          },
          {
            label: '仓库高度',
            key: 'height',
            value: '--',
            unit: '米',
          },
        ]
      )

      keysList.forEach((d) => {
        const val = this.dataObj[d.key]
        if (val) {
          d.value = val
        }
      })
      return {
        keysList,
        desc: this.dataObj.desc,
      }
    },
    baseInfoData2() {
      const keysList = [
        {
          label: '消防等级',
          key: 'fireLevelLabel',
          value: '--',
          unit: '',
        },
        {
          label: '消防设施',
          key: 'fireFacilitiesLabel',
          value: '--',
          unit: '',
        },
        {
          label: '变压器',
          key: 'transformerLabel',
          value: '--',
          unit: '',
        },
        {
          label: '提供雨棚',
          key: 'sewagePipeLabel',
          value: '--',
          unit: '',
        },
      ]

      keysList.forEach((d) => {
        const val = this.dataObj[d.key]
        if (val) {
          d.value = val
        }

        if (d.key === 'intelligenceLabel') {
          d.value = val.join(',')
        }
      })

      return {
        keysList,
      }
    },

    lngLat() {
      return this.dataObj.position || ''
    },
  },
  watch: {
    currentTab(tab) {
      this.$nextTick(() => {
        console.log(tab)

        // console.log(this.$refs[tab.value].$el)
        // this.$refs[tab.value].$el.scrollIntoView()
      })
    },
  },
  mounted() {},
})
</script>
<style lang="scss" scoped>
.park-detail-bottom-left-wrapper {
  background-color: #fff;
}
</style>
